<%--
  Created by IntelliJ IDEA.
  User: L
  Date: 2021/4/5
  Time: 15:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>局部刷新</title>
    <script type="text/javascript">
      function doAjax(){
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.onreadystatechange = function(){
          if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
            var data = xmlHttp.responseText;
            var div = document.getElementById("mydata");
            div.style = "width : 370px; height : 50px;background-color : yellow;";
            div.innerText = data;
          }
        };
        var name = document.getElementById("name").value;
        var w = document.getElementById("w").value;
        var h = document.getElementById("h").value;

        var param = "name="+name+"&w="+w+"&h="+h;
        xmlHttp.open("get","/myWeb/bmi?"+param,true);

        xmlHttp.send();
      }

    </script>
  </head>
  <body>
    <p>局部刷新Ajax-计算bmi</p>
    <div>
      姓名：<input type="text" id="name" /><br>
      体重（公斤）：<input type="text" id="w" /><br>
      身高（m）：<input type="text" id="h"><br>
      <input type="button" value="计算bmi" onclick="doAjax()"><br><br><br><br><br>
    </div>

    <div id="mydata"></div>
  </body>
</html>
